<style>
	.ivu-modal-body {
		padding: 0 !important;
	}
	
	.person-header {
		padding: 10px 15px;
	}
	
	.person-header-info span {
		margin-left: 10px;
	}
	
	.person-header-info p {
		padding: 5px;
	}
	
	.user-info {
		padding-left: 15px;
	}
</style>
<template>
	<div>
		<Button @click="personInfo">tafdsaf</Button>
		<Modal v-model="personModel" width="800">
			<p slot="header">
				<span>{{personModalLebal[0].fcn}}</span>
			</p>
			<div>
				<Tabs type="card">
					<Tab-pane :label="personModalLebal[1].fcn">
						<div>
							<Row class="person-header">
								<Col span="4" style="height: 83px; border: 1px solid #eee;">
								<img src="../../common/images/401.gif" height="60px" />
								</Col>
								<Col span="20" class="person-header-info">
								<P>
									<span>	{{personModalval.fdeptno}}</span>
									<span>	{{personModalval.fname}}</span>
									<span>	{{personModalval.fnation}}</span>
									<span>	{{personModalval.fgender}}</span>
									<span>	{{personModalval.fpolitic}}</span>
								</P>
								<P>
									<span>	{{personModalval.faddress}}</span>
									<span>	{{personModalval.birthday}}</span>
									<span>{{personModalLebal[4].fcn}}	{{personModalval.fidcard}}</span>
									<span>	{{personModalval.ffamilyhold}}</span>
									<span>	{{personModalval.fmarriage}}</span>
								</P>
								<P>
									<span>	{{personModalval.fpersiontype}}|<img src="../../common/images/401.gif" height="15px" width="30px"/></span>
									<span>	{{personModalval.rank}}|<img src="../../common/images/401.gif" height="15px" width="30px"/></span>
									<span>{{personModalLebal[5].fnowrank}}	{{personModalval.farmytime}}</span>
								</P>
								</Col>
							</Row>
							<Row>
								<div class="user-info">
									<Col span="6"> {{personModalLebal[6].fcn}} {{personModalval.finschooltime}}
									</Col>
									<Col span="6"> {{personModalLebal[7].fcn}} {{personModalval.foutschooltime}}
									</Col>
									<Col span="6"> {{personModalLebal[8].fcn}} {{personModalval.fcollege}}
									</Col>
									<Col span="6"> {{personModalLebal[9].fcn}} {{personModalval.skill}}
									</Col>
								</div>
								<div class="user-info">
									<Col span="6"> {{personModalLebal[10].fcn}} {{personModalval.fmajor}}
									</Col>
									<Col span="6"> {{personModalLebal[11].fcn}} {{personModalval.feducationrank}}
									</Col>
									<Col span="6"> {{personModalLebal[12].fcn}} {{personModalval.upEdu}}
									</Col>
									<Col span="6"> {{personModalLebal[13].fcn}} {{personModalval.fjob}}
									</Col>
								</div>
								<div class="user-info">
									<Col span="6"> {{personModalLebal[14].fcn}} {{personModalval.fmilitaryranktime}}
									</Col>
									<Col span="6"> {{personModalLebal[15].fcn}} {{personModalval.franklevel}}
									</Col>
									<Col span="6"> {{personModalLebal[16].fcn}} {{personModalval.skillTime}}
									</Col>
									<Col span="6"> {{personModalLebal[17].fcn}} {{personModalval.fsource}}
									</Col>
								</div>
								<div class="user-info">
									<Col span="6"> {{personModalLebal[18].fcn}} {{personModalval.fcreateytime}}
									</Col>
									<Col span="6"> {{personModalLebal[19].fcn}} {{personModalval.franktime}}
									</Col>
									<Col span="6"> {{personModalLebal[20].fcn}} {{personModalval.feducationuptime}}
									</Col>
									<Col span="6"> {{personModalLebal[21].fcn}} {{personModalval.fidnumber}}
									</Col>
								</div>
								<div class="user-info">
									<Col span="6"> {{personModalLebal[22].fcn}} {{personModalval.fnowrank}}
									</Col>
									<Col span="6"> {{personModalLebal[23].fcn}} {{personModalval.fischarge }}
									</Col>
									<Col span="6"> {{personModalLebal[24].fcn}} {{personModalval.fcomputerranktime}}
									</Col>
									<Col span="6"> {{personModalLebal[25].fcn}} {{personModalval.fspeciality}}
									</Col>
								</div>
								<div class="user-info">
									<Col span="6"> {{personModalLebal[26].fcn}} {{personModalval.fsort}}
									</Col>
									<Col span="6"> {{personModalLebal[27].fcn}} {{personModalval.fcomputerrank}}
									</Col>
									<Col span="12"> {{personModalLebal[28].fcn}} {{personModalval.faddress}}
									</Col>
								</div>
							</Row>
						</div>
					</Tab-pane>
					<Tab-pane :label="personModalLebal[2].fcn">标签二的内容</Tab-pane>
					<Tab-pane :label="personModalLebal[3].fcn">标签三的内容</Tab-pane>
				</Tabs>
			</div>
			<div slot="footer">
				<Button @click="colsePersonInfo" type="primary">关闭</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				personModalval: {},
				personModel: false,
				personModalLebal: [{
					fcn: '人员信息'
				}, {
					fcn: '基本信息'
				}, {
					fcn: '请假信息'
				}, {
					fcn: '其他信息'
				}, {
					fcn: '身份证号：'
				}, {
					fcn: '入伍时间：'
				}, {
					fcn: '入校时间：'
				}, {
					fcn: '毕业时间：'
				}, {
					fcn: '毕业院校：'
				}, {
					fcn: '职业技能鉴定：'
				}, {
					fcn: '专业：'
				}, {
					fcn: '文化程度：'
				}, {
					fcn: '学历升级：'
				}, {
					fcn: '职务：'
				}, {
					fcn: '军衔时间：'
				}, {
					fcn: '军衔文级：'
				}, {
					fcn: '职业技能鉴定时间：'
				}, {
					fcn: '来源：'
				}, {
					fcn: '党团时间：'
				}, {
					fcn: '职级时间：'
				}, {
					fcn: '学历升级时间：'
				}, {
					fcn: '证件号：'
				}, {
					fcn: '现职级：'
				}, {
					fcn: '是否主官：'
				}, {
					fcn: '计算机过级时间：'
				}, {
					fcn: '专长：'
				}, {
					fcn: '显示顺序：'
				}, {
					fcn: '计算机过级：'
				}, {
					fcn: '家庭住址：'
				}, ]
			}
		},
		methods: {
			personInfo() {
				this.personModel = true;
				this.getPersonInfo();
			},
			colsePersonInfo() {
				this.personModel = false;
			},
			getPersonInfo() {
				this.$http.get(this.url + 'person/PersonInfo').then(response => {
					let isOk = response.data;
					console.log(isOk)
					if(isOk.success) {
             console.log(isOk)
						
             this.personModalval=isOk.obj
             console.log(this.personModalval)
					} else {
						this.$Message.error(isOk.msg);
					}
				}, response => {
				});
			}
		},
		

	}
</script>

<style>

</style>